<link rel="stylesheet" href="form.css">
<div id="root">
    <tip :status="tipStatus" @close="tipStatus=false" @close2="data=>tipStatus=data"></tip>
    <loading :loadingState="loadingState2">  </loading>
    <test2 id="test2" :title="'主页'" @click-left="clickLeftFn" @click-right="clickRightFn"></test2>
    <test @submit="submitFn" > </test>
    <test3 :title="'主要按钮'" :type="'van-button--primary'"> </test3>
    <test3 :title="'信息按钮'" :type="'van-button--info'"> </test3>
    <test3 :title="'危险按钮'" :type="'van-button--danger'"> </test3>
    <test3 :title="'警告按钮'" :type="'van-button--warning'"> </test3>
    <test3 :title="'默认按钮'" :type="'van-button--success'"> </test3>
    <br>


  <button @click="tipStatus=true"> 显示对话框</button>
  <page :total="100" :size="10"></page>
  <loading2 @loading2="data=>gostatus=data" :status="gostatus"></loading2>
  <maketable :goto="manTh" :goto2="manTd">   </maketable>
  <maketable :goto="shopTh" :goto2="shopTd">   </maketable>
  <button @click="showFn"> 首页无用按钮</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./form.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {
        tipStatus:false,
        loadingState2:true,
        gostatus:false,
        manTh:[{title:'编号',key:"id"},
        {title:'姓名',key:"name"},
        {title:"年龄",key:"age"},
        {title:"性别",key:"sex"},
        {title:"性别2",key:"sex2",render:row=>{
            return row.sex2==0?'男':'女'
        }}],
        manTd:[{id:1,name:"周浩楠",age:18,sex:"男",sex2:"0"},
        {id:2,name:"周浩楠",age:19,sex:"男",sex2:"0"},
        {id:3,name:"周浩楠",age:20,sex:"女",sex2:"1 "}],
         shopTh:
        [{title:'编号',key:"id"},
        {title:'名称',key:"name"},
        {title:"价格",key:"price"}],
         shopTd:
         [{id:1,name:"西瓜🍉",price:7},
        {id:2,name:"葡萄🍇",price:19},
        {id:3,name:"草莓🍓",price:12}]
    },
    methods:{
        submitFn(data){
                alert(data.account+'提交成功')
        },
        clickLeftFn(data){
              alert("left")
        },
        clickRightFn(data){
            alert("right")
        },
        changeFn(){
            this.gostatus=true
        },
        showFn(){
            console.log(this.manTh)
        }
    }

})
</script>